<template>
    <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form v-show="currentTab==='field'" size="small" label-width="90px">

          <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
            <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
          </el-form-item>

          <el-form-item v-if="configData.chartOption.text!==undefined" label="标题">
            <el-input v-model="configData.chartOption.text" placeholder="请输入标题" />
          </el-form-item>

          <el-form-item v-if="configData.chartOption.subtext!==undefined" label="副标题">
            <el-input v-model="configData.chartOption.subtext" placeholder="请输入副标题" />
          </el-form-item>
          
          <el-form-item v-if="configData.chartOption.x!==undefined" label="标题位置">
            <el-select v-model="configData.chartOption.x" placeholder="请选择">
              <el-option label="居左" value="left"></el-option>
              <el-option label="居中" value="center"></el-option>
              <el-option label="居右" value="right"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.fontSize!==undefined" label="标题字号">
            <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.fontSize"></el-input-number>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.fontWeight!==undefined" label="标题粗细">
            <el-select v-model="configData.chartOption.fontWeight" placeholder="请选择">
              <el-option label="normal" value="normal"></el-option>
              <el-option label="bold" value="bold"></el-option>
              <el-option label="bolder" value="bolder"></el-option>
              <el-option label="lighter" value="lighter"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.fontFamily!==undefined" label="字体样式">
            <el-select v-model="configData.chartOption.fontFamily" placeholder="请选择">
              <el-option
                v-for="(item,index) in fontFamilys"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="" label="应用主题">
            <el-switch v-model="configData.chartOption.isTopic" />
          </el-form-item>

          <el-form-item v-if="configData.chartOption.isVmap!==undefined" label="显示工具条">
            <el-switch v-model="configData.chartOption.isVmap" />
          </el-form-item>
          <el-form-item label="缩放和平移">
            <el-select v-model="configData.chartOption.roam" placeholder="请选择">
              <el-option label="开启缩放和平移" :value="true"></el-option>
              <el-option label="只允许缩放" value="scale"></el-option>
              <el-option label="只允许平移" value="move"></el-option>
              <el-option label="禁止缩放和平移" :value="false"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
            <el-select v-model="configData.chartOption.animate" placeholder="请选择">
              <el-option
                v-for="item in animateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">

          <data-source-config :dataSourceType="configData.chartOption.dataSourceType" :customData="configData" :customId="configData.customId" 
            @changeSource="changeSource"  @changeData="changeData" :baseType="'two'"></data-source-config>

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>

        </el-form>
        <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right"  :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <el-dialog
      title="通用处理"
      v-if="open"
      :visible.sync="open"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog>    
  </div>
</template>

<script>

import {animateOptions} from '../../animate/animate'
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor"
import DataSourceConfig from '@/views/tool/datav/components/config/DataConfig/DataSourceConfig'

export default {
  components: {
    DataSourceConfig,
    DataEditor
  },
  props: ["costomData"],
  data() {
    return {
      fontFamilys:this.fontFamilys,
      currentTab: 'field',
      configData: this.costomData,
      animateOptions,
      staticDataValue: this.costomData != null ? JSON.stringify(this.costomData.chartOption.staticDataValue) : '',
      interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
      requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : '',
      aceKey:Math.random(),
      open:false,
    }
  },
  //页面加载完执行
  mounted() {
    
  },
  computed: {
    
  },
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        // console.log("1=>", newVal);
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = JSON.stringify(newVal.chartOption.staticDataValue);
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
      }
    }
  },
  methods: {
    changeSource(val){
      this.$set(this.configData.chartOption, 'dataSourceType', val);
    },
    changeData(val,id,type){
      if(this.configData.customId == id){
        if(type == 'static'){
          this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(val));
        }else if(type == 'url'){
          
          if(val.type == "interfaceUrl"){
            this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
          }else if(val.type == "requestParameters"){
            this.$set(this.configData.chartOption, 'requestParameters', val.arr);
          }else if(val.type == "requestMethod"){
            this.$set(this.configData.chartOption, 'requestMethod', val.arr);
          }else if(val.type == "token"){
            this.$set(this.configData.chartOption, 'token', val.arr);
          }else if(val.type == "timeout"){
            this.$set(this.configData.chartOption, 'timeout', val.arr);
          }
        }else if(type == 'database'){
          this.$set(this.configData.chartOption, 'database', val.database);
          this.$set(this.configData.chartOption, 'bi', val.bi);
        }else if(type == 'form'){
          this.$set(this.configData.chartOption, 'formSource', val);
        }else if(type == 'websocket'){
           this.$set(this.configData.chartOption, 'interfaceKey', val);
        }
      }
      
    },
    editData(){
      this.open = true;
    },
    cancelData(){
      this.open = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.open = false;
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .center-tabs .el-tabs__item {
    width: 33%;
    text-align: center;
}
</style>